<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>→_→</title>
  <link rel="stylesheet" type="text/css" href="public/css/start.css" />

  <link rel="stylesheet" type="text/css" href="public/css/cake.css" />

  <link rel="stylesheet" type="text/css" href="public/css/photos.css" />

  <link rel="stylesheet" type="text/css" href="public/css/wish.css" />

  <link rel="stylesheet" type="text/css" href="public/css/end.css" />

  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }

    .wrap-start {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .wrap-cake {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #ee9ca7;

      display: none;
    }

    .wrap-photos {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #eee;


      display: none;
    }
  </style>

</head>

<body>

  <!-- -------------------开始页面-------------------------- -->
  <div class="wrap-start">
    <nav class="nav">
      <div class="nav-content">
        <ul class="nav-items">
          <li class="nav-item"> <span class="item-text"> 距离生日：</span> </li>
          <li class="nav-item"> <span class="item-text"> <span id="day"> </span> </span> </li>
          <li class="nav-item"> <span class="item-text"> <span id="hour"></span> </span> </li>
          <li class="nav-item"> <span class="item-text"> <span id="min"></span> </span> </li>
          <li class="nav-item"> <span class="item-text"> <span id="sec"></span> </span> </li>
        </ul>
      </div>
      <label class="nav-btn" for="menu-cb" id="navBtn">
        <span class="btnRail"></span>
        <span class="btnRail"></span>
      </label>
    </nav>
  </div>

  <!-- -------------------相片页面-------------------------- -->
  <div class="wrap-photos">
    <div class="container">
      <img src="public/img/pk3.png" class="pic1" />
      <img src="public/img/pk1.jpg" class="pic2" />
      <img src="public/img/pk4.png" class="pic3" />
      <img src="public/img/pk2.png" class="pic4" />
      <img src="public/img/pk7.png" class="pic5" />
      <img src="public/img/pika02.jpg" class="pic6" />
      <img src="public/img/pika01.jpg" class="pic7" />
      <img src="public/img/pk6.png" class="pic8" />
      <img src="public/img/pk5.png" class="pic9" />
      <img src="user.png" class="pic10" />
    </div>

  </div>
  <script src="public/js/photos.js" type="text/javascript" charset="utf-8"></script>

  <!-- -------------------cake页面-------------------------- -->
  <div class="wrap-cake">
    <div class="cake">
      <div class="cake-floor"><img src="public/img/cake-floor.png"></div>
      <div class="cake-foot"><img src="public/img/cake-foot.png"></div>
      <div class="cake-candle"><img src="public/img/cake-candle.png"></div>
      <div class="candle-fire"></div>
      <div class="cake-text">
        <h1>happy birthday!</h1>
        <span>生日快乐</span>
      </div>
    </div>

    <div class="wish" id="endBtn">
      <span>🎉</span><span>🎉</span><span>🎉</span><span>(>‿◠)✌</span>
    </div>
  </div>


  <!-- -------------------end页面-------------------------- -->
  <!-- <div class="wrap-end"></div> -->


  <!-- -------------------音频页面-------------------------- -->
  <audio id="audioBir">
    <source src="public/happybirthday.mp3" type="audio/mpeg">
  </audio>

  <script>
    ///////////////////////////// 设置生日倒数时间 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    var t = "2021/02/20,00:00:00"
  </script>


  <!------------------------------ 开始页面js 开始 -->
  <script src="public/js/start.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">
    // var endBtn = document.getElementById("endBtn");
    // endBtn.onclick = function () {
    //   wrapCake.style.display = "none";
    //   endFun();
    // }
  </script>

  <!------------------------------ end页面js 开始 -->
  <script src="public/js/end.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>